<template>
  <div class="page white-stage">
    <top-filter :filterOptions="filterOptions"></top-filter>

    <div class="container follow-pdt grey">
      <div class="follows-list">
        <follow-item v-for="(follow, index) in clues" :key="index" :follow="follow"></follow-item>
      </div>
    </div>

    <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
    <router-link class="new-follow" to="/normal-select-follow">新增</router-link>

  </div>
</template>

<script>
  import Vue from 'vue'

  import { Cell, Group } from 'vux'
  import topFilter from '../components/top-filter'
  import dropdownOption from '../components/dropdown-option';
  import followItem from '../components/follow-item'
  import crmCover from '../components/crm-cover'

  import {
    SHOW_COVER
  } from '../store/mutation-types';

  Vue.use(IScrollView, IScroll)

   export default{
    data () {
    return {
      clues:[] ,
      filterOptions:[
        {
        title: '搜索',
        class: 'txt-center',
        },

        {
          title : '排序',
          class: 'txt-center',
          checked: '1',
          options: [
            {
            text : '跟进时间倒序',
            value: '1'
            },

            {
            text : '更新时间倒序',
            value: '2'
            },

            {
            text : '姓名正序',
            value: '3'
            },

          ]
        },

        {
          title:'筛选',
          class:'txt-center',
          value: '1',
          checked: '1',

          options:[
            // 未联系时间开始
            {
              text : '未联系时间',
              value : '1',
              checked: '2',
              options: [
                {
                  text : '一周到两周',
                  value : '1'
                },
                {
                  text : '两周到一月',
                  value : '2'
                },
                {
                  text : '一月到两月',
                  value : '3'
                },
                {
                  text : '两月以上',
                  value : '4'
                }
              ]
            },
            // 未联系时间结束

            // 负责人开始
            {
              text : '负责人',
              value : '2',
              checked: '1',
              options: [
                {
                  text : '营销顾问1',
                  value : '1'
                },
                {
                  text : '营销顾问2',
                  value : '2'
                },
                {
                  text : '营销顾问3',
                  value : '3'
                }
              ]
            },
            // 负责人结束

            // 所属团队开始
            {
              text : '所属团队',
              value : '3',
              checked: '1',
              options: [
                {
                  text : '全优加',
                  value : '1'
                },
                {
                  text : '团队1',
                  value : '2'
                },
                {
                  text : '团队2',
                  value : '3'
                }
              ]
            },
            // 所属团队开始

            // 客户属性开始
            {
              text : '客户属性',
              value : '4',
              checked: '1',
              options: [
                {
                  text : '一般客户',
                  value : '1'
                },
                {
                  text : '意向客户',
                  value : '2'
                },
                {
                  text : '成交客户',
                  value : '3'
                },

                {
                  text : '无效客户',
                  value : '4'
                },

                {
                  text : '其他客户',
                  value : '5'
                },

              ]
            },
            // 客户属性结束

            // 跟进状态开始
            {
              text : '跟进状态',
              value : '5',
              checked: '1',
              options: [
                {
                  text : '初步接洽',
                  value : '1'
                },
                {
                  text : '需求确定',
                  value : '2'
                },
                {
                  text : '方案/报价',
                  value : '3'
                },

                {
                  text : '谈判/合同',
                  value : '4'
                },

                {
                  text : '成交',
                  value : '5'
                },

              ]
            }
            //跟进状态结束
          ],
        },

      ],
    }
    },

    components:{
      topFilter,
      Cell,
      Group,
      dropdownOption,
      followItem,
      crmCover
    },

    mounted () {
    this.getClues();
    this.callJsApi('biz.navigation.setTitle',{title:'跟进记录'});
    },

    methods: {
    refresh (iscroll) {
      console.log('refresh')
      // Refresh current data
    },

    log () {
      console.log('ee');
    },

    load (iscroll) {
      console.log('load')
      // Load new data
    },

    test () {
      console.log('test')
    },

    getClues(data) {

      var data = Object.assign({
        page_size: this.page_size,
        custom_type: 1,
        page_index: this.page_index,
        own: '',
      }, data || {});
      // store.dispatch('getClues', data).then(function(response){
      //     if(response.errcode === 0) {
      //       this.clues = this.clues.concat(response.results.data);
      //     } else {
      //       alert('系统服务异常！请联系管理员!');
      //     }
      // });
      let response = {
        "errcode": 0,
        "errmsg": "接口调用成功!",
        "results": {
        "total": 6,
        "per_page": 2,
        "current_page": 2,
        "last_page": 3,
        "from": 3,
        "to": 4,
        "data": [
          {
          "id": 9,
          "custom_id": 1,
          "suid": 1,
          "uid": null,
          "clue_desc": "线索描述，电话跟进了王子宝宝4",
          "clue_tpl_id": null,
          "clue_type": "DH#",
          "clue_insert_type": "RG#",
          "location_j": "113.329084",
          "location_w": "23.13188",
          "clue_location": "广东广州富力盈通",
          "next_time": "2016-07-12 22:32:04",
          "status": "OK##",
          "insert_time": "2017-03-23 19:26:51",
          "update_time": null,
          "nick_name": null,
          "head_img_url": 'http://img4.imgtn.bdimg.com/it/u=3364481296,3190728730&fm=11&gp=0.jpg',
          "mobile_num": "18620300370",
          "parent_name": "王雪兵",
          "imgs": [
            {
            "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg"
            },
            {
            "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg"
            }
          ]
          },
          {
          "id": 8,
          "custom_id": 1,
          "suid": 1,
          "uid": null,
          "clue_desc": "线索描述，电话跟进了王子宝宝3",
          "clue_tpl_id": null,
          "clue_type": "DH#",
          "clue_insert_type": "RG#",
          "location_j": "113.329084",
          "location_w": "23.13188",
          "clue_location": "广东广州富力盈通",
          "next_time": "2016-07-12 22:32:04",
          "status": "OK##",
          "insert_time": "2017-03-24 19:26:48",
          "update_time": null,
          "nick_name": null,
          "head_img_url": 'http://img1.imgtn.bdimg.com/it/u=2540796225,385730206&fm=23&gp=0.jpg',
          "mobile_num": "18620300370",
          "parent_name": "王雪兵",
          "imgs": [
            {
            "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg"
            },
            {
            "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg"
            }
          ]
          }
        ]
        }
      };

      if(response.errcode === 0) {

        let that = this;

        this.clues = this.clues.concat(response.results.data);

      } else {
        alert('系统服务异常！请联系管理员!');
      }
    },

    },

    computed:{
    isShowCover () {
      return this.$store.state.app.isShowCover
    }
    },

   }
</script>

<style lang="less">

  .follow-pdt{
  padding-top: 40px;
  }

  .new-follow{
  background-color: #35ADFF;
  color: white;
  position: fixed;
  z-index: 80;
  bottom: 30px;
  right: 26px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  padding: 2px;
  border: none;
  outline: none;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  font-weight: 700;
  display: block;
  line-height: 38px;
  text-align: center;

  }
</style>
